<template>
    <div class="ex-tabs flex">
        <div class="ex-tab" v-for="(item, index) in listArr" :key="index" @click="changeTab(index)"
            :class="active == index ? 'active' : ''">
            {{ item.name }}
        </div>
    </div>
</template>

<script>
export default {
    props: {

    },
    components: {

    },
    data() {
        return {
            active: 0,
            listArr: [
                {
                    name: this.$t('热门')
                },
                {
                    name: this.$t('涨幅榜')
                },
                {
                    name: this.$t('跌幅榜')
                },
                {
                    name: this.$t('24h成交额')
                }
            ],
        }
    },
    methods: {
        changeTab(index) {
            this.active = index;
            this.$emit('tabs', index)
        },
    },
    activated() {
        this.listArr = [
            {
                name: this.$t('热门')
            },
            {
                name: this.$t('涨幅榜')
            },
            {
                name: this.$t('跌幅榜')
            },
            {
                name: this.$t('24h成交额')
            }
        ]
    },
}
</script>

<style lang="scss" scoped>
.ex-tabs {
    font-size: 28px;
    //display: flex;
    margin-top: 52px;

    //justify-content: center;
    //align-items: center;
    .ex-tab {
        text-align: center;
        //flex: 1;
        float: left;
        padding: 10px 25px;
        border-radius: 4px;
        color: #787E8C;
    }
}

.ex-tabs .active {
    @include themify() {
        background: themed("color_main") !important;
    }

    color: #fff;
}
</style>
